<div id="finds"  ng-controller="findController"  ng-scroll="show($event)">

    <!-- 发现页面的头部 -->
    <div id="finds-header" class="high">
      <p class="faxian">
        <span>发现</span>
        <span></span>
      </p>
      <ul class="fix">
        <li >精选</li>
        <li>训练</li>
        <li>饮食</li>
        <li>商城</li>

      </ul>
      <ul class="fixs swiper-pagination"></ul>
      <div id="bar"></div>
    </div>

    <!-- 四个大的模块 -->
    <div class="mokuai swiper-container">     <!--swiper-container -->
        <ul class="fenlei swiper-wrapper">   <!--swiper-wrapper -->
      <!-- 精选部分 -->
        <li class="jingxuan swiper-slide" ng-controller="jingXuanController">     <!--swiper-slide -->
          <!--  轮播图部分-->
          <div class="swiper-container lunbotu jingXuanLunBo">
            <ul class="swiper-wrapper">
              <li class="swiper-slide"><img src="./find/img/jingxuan/lunbo1.jpg"></li>
              <li class="swiper-slide"><img src="./find/img/jingxuan/lunbo2.jpg"></li>
              <li class="swiper-slide"><img src="./find/img/jingxuan/lunbo3.jpg"></li>
              <li class="swiper-slide"><img src="./find/img/jingxuan/lunbo4.jpg"></li>
            </ul>

          </div>

          <!-- 话题讨论 -->
          <div class="talks divs">
              <p class="titles">
                <span>话题讨论</span>
                <span></span>
              </p>

              <ul>
                <li>#跑步打卡#</li>
                <li>#去户外野练#</li>
                <li>#一张图证明练痕...#</li>
              </ul>
          </div>

          <!-- 热门活动 -->
          <div class="activity divs">
            <p class="titles">
              <span>热门活动</span>
              <span></span>
            </p>
            <div>
              <span>活动进行中</span>
              <p>线上跑：10天10公里小挑战</p>
            </div>
          </div>

          <!--小组推荐  -->
          <div class="group-tuijian divs">
            <p class="titles">
              <span>小组推荐</span>
              <span></span>
            </p>
            <div class="det">
                <div>
                  <p><img src="./find/img/jingxuan/touxiang1.jpg"></p>
                  <h3>keep男神女神养成</h3>
                  <span>4728人参加</span>
                </div>

                <div>
                  <p><img src="./find/img/jingxuan/touxiang2.jpg"></p>
                  <h3>因为运动而在一起</h3>
                  <span>1952人参加</span>
                </div>
            </div>
          </div>

          <!--  达人推荐-->
          <div class="daren-tuijian divs">
            <p class="titles">
              <span>达人推荐</span>
              <span></span>
            </p>

            <ul>
                <li>
                  <img src="./find/img/jingxuan/touxiang2.jpg">
                  <div>
                      <span>Sir_Martino</span>
                      <p>跑酷健身指导，上海LINK跑酷团tuantuantuan</p>
                  </div>
                  <span>关注</span>
                </li>
                <li>
                  <img src="./find/img/jingxuan/touxiang2.jpg">
                  <div>
                      <span>Sir_Martino</span>
                      <p>跑酷健身指导，上海LINK跑酷团tuantuantuan</p>
                  </div>
                  <span>关注</span>
                </li>
                <li>
                  <img src="./find/img/jingxuan/touxiang2.jpg">
                  <div>
                      <span>Sir_Martino</span>
                      <p>跑酷健身指导，上海LINK跑酷团tuantuantuan</p>
                  </div>
                  <span>关注</span>
                </li>
            </ul>
          </div>

          <!-- 精选文章 -->
          <div class="nivo divs">
              <p class="titles">
                <span>精选文章</span>
                <span></span>
              </p>

              <img src="./find/img/jingxuan/article.jpg">
              <div>
                <p>跑步答疑第四期：跑步会变成肌肉腿吗？</p>
                <span>439评论 / 243847阅读数</span>
              </div>
          </div>
        </li>



        <!-- 训练部分 -->
        <li class="xunlian swiper-slide" ng-controller="xunLianController" >
          <!--  轮播图部分-->
          <div class="swiper-container lunbotu xunLianLunBo">
            <ul class="swiper-wrapper">
              <li class="swiper-slide" ng-repeat="list in lists"><img src="{{list.photo}}"></li>
            </ul>
          </div>

          <!-- 小导航ku-->
          <div class="xiaoNav">
              <ul>
                  <li><a href="">动作库</a></li>
                  <li><a href="">音乐库</a></li>
                  <li><a href="">全部训练</a></li>
              </ul>
          </div>

          <!--  各种类目的训练-->
          <div class="category">
              <div class="xunLianCategories categories" ng-repeat="item in items">
                  <p>
                    <span>{{item.sectionName}}</span>
                    <span></span>
                  </p>

                  <ul>
                    <li ng-repeat="image in item.plans" style="background:url({{image.picture}}) no-repeat ;background-size:7.5rem 5rem">
                        <a href="">
                          <!-- <img src="{{image.picture}}"> -->
                          <p>{{image.title}}</p>
                          <p>{{image.pioneer}}人已参加</p>
                          <p><span>K{{image.difficulty}}</span> <span>{{image.averageDuration}}分钟</span></p>
                        </a>
                    </li>
                  </ul>
              </div>
          </div>
        </li>



        <!-- 饮食部分 -->
        <li class="food swiper-slide" ng-controller="foodController">
          <!--  轮播图部分-->
          <div class="swiper-container lunbotu foodLunBo">
            <ul class="swiper-wrapper">
              <li class="swiper-slide" ng-repeat="list in lists"><img src="{{list.photo}}"></li>
            </ul>
          </div>

          <!-- 小导航ku -->
          <div class="xiaoNav">
              <ul>
                  <li ng-repeat="item in items.navigate "><a href="">{{item.name}}</a></li>
                 <!-- <li><a href="">早餐</a></li>
                  <li><a href="">午餐</a></li>
                  <li><a href="">晚餐</a></li> -->
              </ul>
          </div>

          <!--  饮食搭配及展示-->
          <div class="foodShow">
            <div class="foodCategories categories" ng-repeat="item in items.recipeTags">
                <p>
                  <span>{{item.name}}</span>
                  <span></span>
                </p>

                <ul>
                  <li ng-repeat="image in item.recipes">
                    <a href="">
                      <img src="{{image.cover}}">
                      <p>{{image.name}}</p>
                      <p>{{image.calorie}}kcal<p>
                    </a>
                  </li>
                </ul>

                <div class="content">{{item.content}}</div>
            </div>
          </div>
        </li>



        <!-- 商城部分 -->
        <li class="shop swiper-slide" ng-controller="mallController">

          <!--  轮播图部分-->
          <div class="swiper-container lunbotu mallLunBo" >
            <ul class="swiper-wrapper">
              <li class="swiper-slide" ng-repeat="list in lists"><img src="{{list.imageUrl}}"></li>
            </ul>
          </div>

          <!-- 小导航ku -->
          <div class="xiaoNav">
            <ul>
                <li ng-repeat="category in categories">
                  <a href="" style="background:url({{category.iconUrl}}) center top no-repeat; background-size:0.94rem 0.94rem;">
                    {{category.name}}
                  </a>
                </li>

            </ul>
          </div>

          <!-- 小广播 -->
          <div class="xiaoGuangBo">
              <span>NOTICE</span>
              <ul class="notice swiper-container">
                <div class="swiper-wrapper">
                  <li class="swiper-slide note" ng-repeat="notice in notices" name="{{notice.link}}"><span>{{notice.content}}</span class="icon"><span></span></li>
                </div>
              </ul>

          </div>

          <!-- 限时抢购展示 -->
          <div class="qiangGou">
            <div class="swiper-container">
              <ul class="swiper-wrapper">
                <li class="swiper-slide" ng-repeat="adv in advs" >
                  <!-- 左边部分-->
                  <div>
                    <p>{{adv.name}}</p>
                    <p>{{adv.message}}</p>
                    <p>
                      <span class="newPrice">￥{{ adv.specialOfferPrice}}</span>
                      <span class="oldPrice">￥{{ adv.originPrice}}</span>
                    </p>
                    <p><span>{{ adv.time | date : 'yyyy-MM-dd hh:mm:ss EEEE'}}</span></p>
                  </div>

                  <!-- 右边部分 -->
                  <div>
                    <a href=""><img src="{{adv.image}}"></a>
                    <img src="./find/img/mall/ic_store_promotion.png">
                  </div>
                </li>
              </ul>
            </div>
          </div>

          <!-- 各种商品展示 -->
          <div class="shoppingShow">
            <div class="shopCategories categories" ng-repeat="det in dets">
              <p>
                <span>{{det.name}}</span>
                <span></span>
              </p>

              <ul>
                <li ng-repeat="del in det.recommendEntityDTOList">
                  <p>
                    <img src="{{del.picUrl}}">
                    <img src="./find/img/mall/ic_store_promotion.png" class="qiangGouIcon">
                    <span class="haiGou">海外购</span>
                  </p>

                  <p>{{del.name}}</p>

                  <p>
                    <span class="newPrice">￥{{del.price}}</span>
                    <span class="oldPrice">￥{{del.preferentialPrice}}</span>
                  </p>

                </li>
              </ul>

              <div>{{det.desc}}</div>

            </div>
          </div>
        </li>
    </ul>
    </div>


</div>
